<template>
	<view v-if="!initUI" class="page tn-safe-area-inset-bottom">
		<view class="top-bg"></view>
		<view class="page-container">
			<!-- banner -->
			<tn-swiper :list="banner" name="picUrl" :height="300" :effect3d="true" mode="rect" :radius="15"></tn-swiper>

			<!-- 医院信息 -->
			<view class="hosp-info">
				<view class="list-item" style="padding: 10px;">
					<view class="list-content tn-flex tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view class="tn-flex tn-flex-direction-column">
							<view class="tn-flex tn-flex-nowrap  tn-flex-col-center tn-flex-row-left">
								<view @click="navNoAuth('/hosp/company/detail')" v-if="appConfig.logoUrl">
									<!-- <image mode="aspectFill" class="hosp-image" :src="appConfig.logoUrl"/> -->
									<tn-avatar :src="appConfig.logoUrl" size="120rpx"></tn-avatar>
								</view>
								<view class="tn-padding-left-xs">
									<view @click="navNoAuth('/hosp/company/detail')">
										<text
											class="dawn-text-md tn-text-bold tn-color-dawn">{{ appConfig.appTitle || ''}}</text>
									</view>
									<view class="tn-margin-top-ss">
										<tn-tag
											class="dawn-tag-sm dawn-tag-sm__1">{{appConfig.companyRespVO.level || '' }}</tn-tag>
										<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
										<tn-tag
											class="dawn-tag-sm dawn-tag-sm__2">{{appConfig.companyRespVO.nature || '' }}</tn-tag>
										<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
										<tn-tag
											class="dawn-tag-sm dawn-tag-sm__3">{{appConfig.companyRespVO.business || '' }}</tn-tag>
									</view>
									<view class="tn-margin-top-ss">
										<view @click="callPhoneNumber(appConfig.companyRespVO.phone)">
											<text
												class="tn-icon-tel-circle-fill tn-margin-right-ss tn-color-dawn"></text>
											<text class="dawn-text-sm">{{ appConfig.companyRespVO.phone  || '' }}</text>
										</view>
									</view>
								</view>
							</view>

							<view class="tn-margin-top-ss" @click="navNoAuth('/hosp/company/map')">
								<view>
									<text class="tn-icon-map-fill tn-margin-right-ss tn-color-dawn"></text>
									<text>{{appConfig.companyRespVO.address || '' }}</text>
								</view>
							</view>
						</view>
						<view @click="navNoAuth('/hosp/company/detail')"
							class="tn-flex tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
							<view class="tn-text-right">
								<text class="tn-icon-right tn-color-gray"></text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view @click="navTab('/main/news/list?tabsIndex=1')" v-if="newsNoticeArray.length > 0"
				class="tn-bg-white dawn-shadow dawn-radius tn-margin-top-sm tn-margin-bottom-sm tn-padding-ss">
				<tn-notice-bar :list="newsNoticeArray" mode="vertical" leftIconName="notice-fill"></tn-notice-bar>
			</view>

			<view class="tn-margin-top-sm">
				<pBox :items="patientList"></pBox>
			</view>

			<view v-if="menus.indexTop"
				class="menu-nav__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between">
				<block v-for="(item, index) in menus.indexTop" :key="index">
					<view @click="nav(item)" v-if="item.visible"
						class="dawn-shadow menu-nav__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white">
						<view
							class="menu-nav__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-center">
							<image v-if="item.img" class="menu-nav__item__left--image" mode="aspectFill"
								:src="item.img"></image>
							<view v-else
								class="menu-nav__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center tn-color-white"
								:class="[`tn-bg-${item.color}`]">
								<view :class="[`tn-icon-${item.icon}`]"></view>
							</view>
							<view class="menu-nav__item__left__content">
								<view class="menu-nav__item__left__content--title">
									{{ item.title }}
								</view>
								<view class="menu-nav__item__left__content--data">
									{{ item.titleSub }}
									<text class="tn-icon-right tn-padding-left-xs"></text>
								</view>
							</view>
						</view>
						<view class="menu-nav__item__right">
							<image v-if="item.img" mode="aspectFill" :src="item.img"
								class="menu-nav__item__right--image"></image>
							<view v-else class="menu-nav__item__right--icon">
								<view :class="[`tn-icon-${item.icon}`]"></view>
							</view>
						</view>
					</view>
				</block>
			</view>


			<block v-if="menus.indexMiddle" v-for="(m, i) in menus.indexMiddle" :key="i">
				<view class="tn-margin-top-sm tn-bg-white dawn-shadow dawn-radius">
					<view v-if="m.title !== 'none'"
						class="tn-flex tn-padding-top-sm tn-flex-row-between dawn-border-bottom">
						<view class="justify-content-item tn-text-bold tn-padding-bottom-sm tn-padding-left-xs">
							<text class="tn-icon-title"></text>
							<text class="">{{ m.title }}</text>
						</view>
					</view>
					<view class="tn-padding-top-xs tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-left ">
						<block v-for="(item, index) in m.children" :key="index">
							<view @click="nav(item)" v-if="item.visible"
								class="menu-icon tn-padding-sm tn-margin-bottom-xs">
								<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
									<image v-if="item.img" class="menu-icon__item--image" mode="aspectFill"
										:src="item.img"></image>
									<view v-else
										class="menu-icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
										:class="[`tn-main-gradient-${item.color}--light`]">
										<view :class="[`tn-icon-${item.icon}`]"></view>
									</view>
									<view class="tn-text-center">
										<text class="tn-text-ellipsis menu-icon__item--text">{{ item.title }}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</block>


			<view class="tn-main-gradient-dawn--light dawn-radius tn-padding-sm tn-margin-top-sm tn-margin-bottom">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="dawn-text-md tn-text-bold">
						<text class="tn-icon-image-text-fill "></text>
						<text class="">资讯中心</text>
					</view>
					<view @click="navTab('/main/news/list')" class="justify-content-item tn-text-sm dawn-color-grey">
						<text class="">查看更多</text>
						<text class="tn-icon-right"></text>
					</view>
				</view>

				<view class="tn-margin-top-sm">
					<block v-for="(item, index) in newsHot" :key="index">
						<view @click="newsDteail(item)"
							class="tn-bg-white dawn-shadow dawn-radius tn-margin-top-sm dawn-radius">
							<view class="tn-flex tn-padding-sm">
								<view v-if="item.coverImg" class="news-image-box "
									:style="'background-image:url(' + item.coverImg + ')'">
									<view class="news-image-pic"></view>
								</view>
								<view class="tn-padding-left-xs tn-padding-top-xs" style="width: 100%;">
									<view class="tn-text-lg tn-text-bold news-title">
										{{ item.title }}
									</view>
									<view class="tn-padding-top-xs" v-if="item.description">
										<text class=" tn-text-sm tn-color-gray news-desc">
											{{ item.description }}
										</text>
									</view>
									<view class="tn-flex tn-flex-row-right tn-flex-col-between tn-padding-top-xs">
										<!-- <view v-for="(label_item,label_index) in item.tagsArray" :key="label_index"
							class="justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold"
							:class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
							<text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
						</view> -->
										<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray"
											style="padding-top: 5rpx;">
											<text class="tn-icon-footprint tn-padding-right-xs"></text>
											<text class="tn-padding-right">{{ item.views }}</text>
											<text class="tn-icon-time-fill tn-padding-right-xs"></text>
											<text class="">{{ formatDate(item.createTime) }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>

		
		</view>

		<!-- 底部tabbar start-->
		<tn-tabbar :v-model="currentIndex" :list="tabbarList" :animation="true" :safeAreaInsetBottom="true"
			activeIconColor="#fbedde" @change="switchTabbar">
		</tn-tabbar>

	</view>
	<view v-else>
		<view class="init-container">
			<view class="top-bg">
				<view class="top-box-img" :style="{backgroundImage:'url('+appConfig.loginBg+')'}"></view>
			</view>
			<view class="container">
				<!-- 流星-->
				<view class="tn-satr">
					<view class="sky"></view>
					<view class="stars">
						<view class="falling-stars">
							<view class="star-fall"></view>
							<view class="star-fall"></view>
							<view class="star-fall"></view>
							<view class="star-fall"></view>
						</view>
						<view class="small-stars">
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
						</view>
						<view class="medium-stars">
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
						</view>
					</view>
				</view>

				<view class="login-container">

					<view class="init-box">
						<image v-if="appConfig.companyRespVO" class="init-box--image" mode="aspectFit" :src="appConfig.companyRespVO.logoText"></image>
						<image v-else class="init-box--image" mode="aspectFit" src="/static/images/logo_text.png"></image>

						<view class="init-box--title" v-if="appConfig.appTitle">
							<view>{{ appConfig.appTitle }}</view>
							<view class="init-box--desc">
								{{ appConfig.companyRespVO.slogan }}
							</view>
						</view>

						<view class="init-box--loading">
							<!-- <tn-loading :show="true" :size="150" :color="appConfig.ui.themeColorDark"></tn-loading> -->
							<!-- <tn-loading :show="true" :size="120" :color="appConfig.ui.themeColorDark"></tn-loading> -->
							<!-- <tn-line-progress :percent="percent" :striped="true" activeColor="tn-color-dawn">
								<view class="tn-flex tn-flex-row-center tn-flex-col-center">
									<text class="tn-color-white  tn-text-ellipsis">加载中</text>
									<image class="tn-margin-left-xs" src="/static/images/icon_init.png"
										style="height: 45rpx;width: 45rpx"></image>
								</view>
							</tn-line-progress> -->

							<view class="app-loading-item">
								<view class="app-loading-outter"></view>
								<view class="app-loading-inner"></view>
							</view>
						</view>
						<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-padding-top-xl">
							<text class="dawn-color-dark  tn-text-ellipsis">正在加载中，请稍候...</text>
						</view>
					</view>
					
				</view>
			</view>

			<!-- <view class="init-logo tn-flex tn-flex-row-center tn-flex-col-center">
				<view>
					<image class="init-image" :src="appConfig.companyRespVO.logoText" mode="aspectFit"></image>
					<view class="dawn-color-dark" style="font-weight: bolder;font-size: 23px;margin-top: 80px;"
						v-if="appConfig.appTitle">{{ appConfig.appTitle }}</view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-center tn-flex-col-center">

				<view style="width: 70%;top: 60%;position: absolute;">
					<tn-line-progress :percent="percent" :striped="true" activeColor="tn-color-dawn">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center">
							<text class="tn-color-white  tn-text-ellipsis">加载中</text>
							<image class="tn-margin-left-xs" src="/static/images/icon_init.png"
								style="height: 45rpx;width: 45rpx"></image>
						</view>
					</tn-line-progress>
				</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import Routine from '@/libs/routine.js';
	import * as api from '@/api/api.js';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import {
		mapGetters
	} from "vuex";
	const app = getApp();
	export default {
		name: 'index',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'userMenu']),
		data() {
			return {
				initUI: app.globalData.initUI,
				timer: null,
				timer1: null,
				percent: 0,
				currentIndex: 0,
				config_share: app.globalData.config_share, // 分享配置
				currentIndex: 0,
				tabbarList: app.globalData.tabbarList,
				loading: false,
				banner: [],
				menus: app.globalData.appMenus,
				newsNoticeArray: [],
				newsHot: [],
				patientList: []
			}
		},
		created() {
			this.tabbarList = app.globalData.tabbarList;
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.log("index onLoad");
			// console.table(options);

			this.initUI = true;
			if (options.hasOwnProperty('init') || this.isLogin) {
				console.log("index init");
				// this.initUI = false;
				// app.globalData.initUI = false;
				// this.percent = 70;
				// this.initConfig();
			} else {
				// console.log("index scope");
				// if(options.hasOwnProperty('scope')){
				// 	this.percent = 70;
				// }
				// this.initUI = true;
				// app.globalData.initUI = true;
				// this.initConfig();
			}
			console.log("index onLoad end");
		},
		async onShow() {
			await this.$onLaunched;
			console.log("index onShow");
			this.currentIndex = 0;
			this.getIndexData();
		},
		methods: {
			getIndexData() {
				let that = this;
				console.log("getIndexData globalData.appMenus");
				console.table(app.globalData.appMenus);
				if (!app.globalData.appMenus.indexTop) {
					that.initUI = true;
					api.getMenuByRoleCode('hospital_mp').then(res => {
						console.table(res);
						that.initUI = false;
						if (res.code === 0) {
							that.menus = res.data;
							app.globalData.appMenus = res.data;
						}
					});
				} else {
					that.initUI = false;
					this.menus = app.globalData.appMenus;
				}
				api.getIndexData().then(res => {
					if (res.code === 0) {
						app.globalData.config_share = res.data.configShare;
						this.config_share = res.data.configShare;
						this.newsHot = res.data.newsHot;
						this.banner = res.data.banner;
						this.newsNoticeArray = res.data.newsNoticeArray;
					}
				});
			},
			/**
			 * 用户点击右上角分享
			 */
			// #ifdef MP
			onShareAppMessage: function() {
				return {
					title: this.config_share.title,
					imageUrl: this.config_share.imageUrl,
					desc: this.config_share.desc,
					path: '/main/index/index?shareUserId=' + this.uid
				};
			},
			// #endif
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
		}
	}
</script>

<style lang="scss" scoped>
	.init-container {
		// background-image: url('https://yxcp.yncdb.com:444/dawn-traffic/admin-api/infra/file/18/get/884e6353965f941d35c8e48906313c00eedc2010bceeeafc8bc937ea80176e29.png');
		background-size: 100% 100%;
		width: 100vw;
		height: 100vh;
	}

	.init-box {
		z-index: 10000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 50vh;
		// background-color: $dawn-theme-color-light;
		box-shadow: $dawn-box-shadow;
		border-radius: $dawn-border-radius;

		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(6rpx);
		-webkit-backdrop-filter: blur(6rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.1);
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

		&--image {
			border-radius: 8rpx;
			// width: 100%;
			height: 120rpx;
			margin-bottom: 3vh;
		}

		&--title {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 12vh;
			// margin-bottom: 12vh;
			color: $dawn-theme-color;
			font-size: $dawn-font-size-xl;
			font-weight: bolder;
		}

		&--desc {
			color: $dawn-color-grey;
			font-size: $dawn-font-size-md;
			font-weight: bolder;
			margin-top: 30rpx;
		}

		&--check {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}

		&--btn {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		&--loading {
			width: 75%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	.init-logo {
		margin-top: - 5vh;
	}

	.init-image {
		border-radius: 8rpx;
		width: 100%;
		height: 150rpx;
	}

	::v-deep .tn-line-progress--active {
		background-color: $dawn-theme-color !important;
	}

	::v-deep .tn-landscape__container {
		top: 60% !important;
	}
</style>